M

MLOG

Български

Отключете силата на VS Code, като се научите да създавате персонализирани разширения. Това ръководство предлага пълно ръководство, от настройка до публикуване.

Овладяване на разработката на разширения за VS Code: Изчерпателно ръководство за глобални разработчици

Visual Studio Code (VS Code) се превърна в предпочитан редактор за кодиране за милиони разработчици по целия свят. Неговата популярност произтича от леката му природа, мощни функции и, което е най-важно, неговата разширяемост. Възможността за създаване на персонализирани разширения позволява на разработчиците да приспособяват редактора към своите специфични нужди, като повишават производителността и рационализират работните процеси. Това изчерпателно ръководство ще ви преведе през процеса на създаване на ваши собствени разширения за VS Code, от първоначалната настройка до публикуването на вашето творение за използване от целия свят.

Защо да разработвате разширения за VS Code?

Разработването на разширения за VS Code предлага множество предимства, както за отделните разработчици, така и за организациите:

Предпоставки

Преди да се потопите в разработката на разширения, уверете се, че имате инсталирано следното:

Настройка на вашата среда за разработка

С предпоставките на място, вие сте готови да настроите вашата среда за разработка:

  1. Създайте нов проект за разширение: Отворете терминала си и изпълнете следната команда, за да стартирате генератора за разширения:
    2. yo code
  2. Отговорете на подканите: Генераторът ще зададе поредица от въпроси за вашето разширение. Ето разбивка на общите подкани и препоръчаните отговори:
    • Какъв тип разширение искате да създадете? Изберете „New Extension (TypeScript)“ за разширение, базирано на TypeScript, което е препоръчителният подход.
    • Какво е името на вашето разширение? Изберете описателно и уникално име за вашето разширение. Примери: „Code Spell Checker“, „JavaScript Snippets“, „Python Autocomplete“.
    • Какъв е идентификаторът на вашето разширение? Това е уникален идентификатор за вашето разширение, обикновено във формат `publisher.extension-name`. Изберете име на издател (напр. вашето потребителско име в GitHub или името на компанията).
    • Какво е описанието на вашето разширение? Предоставете кратко и информативно описание на това, което прави вашето разширение.
    • Инициализирате ли хранилище за git? Изберете „Yes“, за да инициализирате хранилище за Git за контрол на версиите.
    • Искате ли да използвате eslint за линтиране на кода? Изберете „Yes“, за да наложите последователност на стила на кода.
  3. Отворете проекта във VS Code: След като генераторът приключи, отворете новосъздадената папка на проекта във VS Code.

Разбиране на структурата на проекта

Генераторът за разширения създава основна структура на проекта със следните основни файлове:

Писане на вашето първо разширение

Нека започнем, като създадем просто разширение, което показва съобщение „Hello World“, когато се изпълни команда:

  1. Отворете `src/extension.ts`: Този файл съдържа функцията `activate`, която се извиква, когато вашето разширение е активирано.
  2. Променете функцията `activate`: Заменете съществуващия код със следното:
    3. import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension "my-extension" is now active!');

	let disposable = vscode.commands.registerCommand('my-extension.helloWorld', () => {
		vscode.window.showInformationMessage('Hello World from My Extension!');
	});

	context.subscriptions.push(disposable);
}

export function deactivate() {}
  3. Обяснение:
    • `vscode.commands.registerCommand('my-extension.helloWorld', ...)`: Регистрира команда с ID `my-extension.helloWorld`. Тази команда ще бъде налична в палитрата на командите на VS Code.
    • `vscode.window.showInformationMessage('Hello World from My Extension!')`: Показва информационно съобщение в прозореца на VS Code.
    • `context.subscriptions.push(disposable)`: Добавя командата към абонаментите на разширението, като гарантира, че тя е правилно освободена, когато разширението е деактивирано.
  4. Променете `package.json`: Добавете следното към секцията `contributes`, за да дефинирате командата:
    5. "contributes": {
		"commands": [{
			"command": "my-extension.helloWorld",
			"title": "Hello World"
		}]
	}
  5. Обяснение:
    • `"commands"`: Дефинира командите, които вашето разширение допринася.
    • `"command": "my-extension.helloWorld"`: Указва ID на командата, което съответства на ID, използвано в `extension.ts`.
    • `"title": "Hello World"`: Задава името на дисплея за командата в палитрата на командите.

Тестване на вашето разширение

Сега е време да тествате вашето разширение:

  1. Натиснете F5: Това ще стартира нов прозорец на VS Code с инсталирано вашето разширение. Това е „Extension Development Host“.
  2. Отворете палитрата на командите: Натиснете `Ctrl+Shift+P` (или `Cmd+Shift+P` на macOS), за да отворите палитрата на командите.
  3. Въведете „Hello World“: Трябва да видите вашата команда, изброена в палитрата на командите.
  4. Изберете „Hello World“: Щракването върху командата ще я изпълни и ще покаже съобщението „Hello World“ в прозореца на VS Code.

Дебъгиране на вашето разширение

Дебъгирането е от решаващо значение за идентифициране и отстраняване на проблеми във вашето разширение. VS Code предоставя отлична поддръжка за дебъгиране:

  1. Задайте точки на прекъсване: Щракнете в редактора до номерата на редовете, за да зададете точки на прекъсване във вашия код.
  2. Натиснете F5: Това ще стартира Extension Development Host в режим на дебъгиране.
  3. Задействайте вашето разширение: Изпълнете командата или действието, което задейства кода, който искате да отстранявате.
  4. Инспектирайте променливи и стек на повиквания: Дебъгерът на VS Code ще спре изпълнението при вашите точки на прекъсване, което ви позволява да инспектирате променливите, да преминавате през кода и да изследвате стека на повикванията.

Работа с VS Code API

VS Code API предоставя богат набор от интерфейси и функции за взаимодействие с редактора. Ето някои ключови области на API:

Пример: Създаване на разширение за фрагменти от код

Нека създадем разширение, което добавя фрагмент от код за създаване на основен React компонент:

  1. Създайте папка `snippets`: Създайте нова папка, наречена `snippets` в корена на вашия проект.
  2. Създайте файл с фрагменти: Създайте файл, наречен `react.json` в папката `snippets`.
  3. Добавете дефиницията на фрагмента: Добавете следния JSON към `react.json`:
    4. {
	"React Component": {
		"prefix": "reactcomp",
		"body": [
			"import React from 'react';",
			"",
			"interface Props {\n\t[key: string]: any;\n}",
			"",
			"const ${1:ComponentName}: React.FC = (props: Props) => {\n\treturn (\n\t\t
    \n\t\t\t${2:Content}\n\t\t
    \n\t);\n};",
			"",
			"export default ${1:ComponentName};"
		],
		"description": "Creates a basic React component"
	}
}
  4. Обяснение:
    • `"React Component"`: Името на фрагмента.
    • `"prefix": "reactcomp"`: Префиксът, който задейства фрагмента. Въвеждането на `reactcomp` и натискането на `Tab` ще вмъкне фрагмента.
    • `"body"`: Масив от низове, представляващи редовете код във фрагмента.
    • `${1:ComponentName}`: Таб спиране, което ви позволява бързо да промените името на компонента.
    • `"description"`: Описание на фрагмента.
  5. Променете `package.json`: Добавете следното към секцията `contributes`:
    6. "contributes": {
		"snippets": [{
			"language": "javascriptreact",
			"path": "./snippets/react.json"
		}]
	}
  6. Обяснение:
    • `"snippets"`: Дефинира фрагментите, които вашето разширение допринася.
    • `"language": "javascriptreact"`: Указва езика, за който е приложим фрагментът.
    • `"path": "./snippets/react.json"`: Указва пътя към файла с фрагменти.
  7. Тествайте вашия фрагмент: Отворете файл `.jsx` или `.tsx` и въведете `reactcomp`. Натиснете `Tab`, за да вмъкнете фрагмента.

Разширени техники за разработка на разширения

След като овладеете основите, можете да изследвате по-разширени техники за разработка на разширения:

Интернационализация и локализация (i18n и L10n)

За да достигнете до глобална аудитория, помислете за интернационализиране и локализиране на вашето разширение. Това включва адаптиране на вашето разширение за поддръжка на различни езици и региони.

Публикуване на вашето разширение

След като вашето разширение е готово, можете да го публикувате в VS Code Marketplace, за да могат други да го използват:

  1. Създайте организация на Azure DevOps: Ще ви е необходима организация на Azure DevOps, за да публикувате вашето разширение. Ако нямате такава, създайте безплатен акаунт на уебсайта на Azure DevOps.
  2. Инсталирайте инструмента `vsce`: VS Code Extension Manager (`vsce`) е инструмент за команден ред за пакетиране и публикуване на разширения. Инсталирайте го глобално с помощта на npm:
    3. npm install -g vsce
  3. Създайте издател: Издателят е самоличност, която притежава вашите разширения в Marketplace. Създайте издател, като използвате командата `vsce create-publisher`. Ще трябва да предоставите име на издател и личен токен за достъп (PAT) от Azure DevOps.
  4. Генерирайте личен токен за достъп (PAT): В Azure DevOps отидете на „User Settings“ -> „Personal Access Tokens“ и създайте нов PAT с обхвата „Marketplace (Publish)“.
  5. Пакетирайте вашето разширение: Използвайте командата `vsce package`, за да пакетирате вашето разширение във файл `.vsix`.
  6. Публикувайте вашето разширение: Използвайте командата `vsce publish`, за да публикувате вашето разширение в Marketplace. Ще трябва да предоставите името на издателя си и вашия PAT.

Най-добри практики за разработка на разширения

Следвайте тези най-добри практики, за да създадете висококачествени и поддържани разширения за VS Code:

Ресурси на общността

Ето някои ценни ресурси за научаване на повече за разработката на разширения за VS Code:

Заключение

Разработването на разширения за VS Code е мощен начин да персонализирате вашата среда за кодиране, да увеличите производителността и да споделите вашите решения с глобалната общност на разработчиците. Следвайки това изчерпателно ръководство, можете да овладеете изкуството на разработката на разширения и да създадете иновативни инструменти, които подобряват изживяването във VS Code за себе си и за другите. Не забравяйте да прегърнете общността, да допринесете за проекти с отворен код и непрекъснато да се учите и изследвате постоянно развиващия се свят на разработката на разширения за VS Code. Успех и приятно кодиране!